<template>
  <div class="styles-editor">
    <section>
      <h5>尺寸</h5>
      <div class="editor">
        <div class="operation-cell">
          <el-input v-model="baseAttr.left" size="mini">
            <span slot="prefix">X</span>
          </el-input>
        </div>
        <div class="operation-cell">
          <el-input v-model="baseAttr.top" size="mini">
            <span slot="prefix">Y</span>
          </el-input>
        </div>
        <div class="operation-cell">
          <el-input v-model="baseAttr.width" size="mini">
            <span slot="prefix">W</span>
          </el-input>
        </div>
        <div class="operation-cell">
          <el-input v-model="baseAttr.height" size="mini">
            <span slot="prefix">H</span>
          </el-input>
        </div>
      </div>
    </section>
    <section>
      <h5>填充</h5>
      <div class="editor">
        <div class="operation-cell color-picker">
          <el-color-picker v-model="baseAttr.fill" size="mini" @change="onFillChange" />
          <el-input v-model="baseAttr.fill" size="mini" @change="onFillChange" />
        </div>
        <div class="operation-cell opacity-fill">
          <el-input v-model="baseAttr.opacity" min="0" max="100" size="mini">
            <span slot="suffix">%</span>
          </el-input>
        </div>
        <div class="icon-cell">
          <i class="el-icon-view"></i>
        </div>
      </div>
    </section>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Prop, Watch } from 'vue-property-decorator'
import { fabric } from 'fabric'
import { StyleListType } from '@/views/production_instrument/settings/qrcodeSettings'
import { Dictionary } from '@/interface/Basic'
import { formatColor } from '@/utils/color'
import { deepClone } from '@/utils/specificFunc'
@Component
class StylesEditor extends Vue {
  @Prop({ required: true }) canvasInstance!: fabric.Canvas
  editMode: 'Single' | 'Multiple' = 'Single'
  currentSelected!: fabric.Object
  baseAttr: StyleListType = {
    opacity: 0,
    angle: 0,
    fill: '#FFFFFF',
    left: 0,
    top: 0,
    width: 0,
    scaleX: 1,
    height: 0,
    scaleY: 1,
    strokeWidth: 0,
    // strokeDashArray: [],
    stroke: '#FFFFFF',
    shadow: {
      color: '#FFFFFF',
      blur: 0,
      offsetX: 0,
      offsetY: 0
    }
  }

  created() {
    this.$broadOn('onSelectSingle', (objects: fabric.Object[]) => {
      this.editMode = 'Single'
      this.updateBaseAttr(objects[0])
    })
  }
  @Watch('baseAttr', { immediate: true, deep: true })
  fill_handler(newVal: Dictionary<any>) {
    this.reRenderObjects(this.formatOption(deepClone(newVal)))
  }
  updateBaseAttr(object: fabric.Object) {
    this.baseAttr.fill = formatColor(object.get('fill'))
    this.baseAttr.opacity = (object.get('opacity') || 1) * 100
    this.baseAttr.left = object.get('left') || 0
    this.baseAttr.top = object.get('top') || 0
    this.baseAttr.width = (object.width || 0) * (object.scaleX || 1)
    this.baseAttr.height = (object.height || 0) * (object.scaleY || 1)
    this.baseAttr.scaleX = object.scaleX || 1
    this.baseAttr.scaleY = object.scaleY || 1
    this.baseAttr.stroke = formatColor(object.get('stroke'))
    this.baseAttr.strokeWidth = object.get('strokeWidth') || 0
    this.baseAttr.shadow = object.get('shadow') || {}
    this.baseAttr.angle = object.get('angle') || 0
    this.canvasInstance.renderAll()
  }
  reRenderObjects<T>(option: Dictionary<T>) {
    if (!this.canvasInstance) return
    const result = this.canvasInstance.getActiveObjects()[0]
    if (!result) return
    result.set(option)
    this.canvasInstance.renderAll()
  }
  onFillChange(value: string) {
    this.baseAttr.fill = formatColor(value)
  }
  formatOption(option: Dictionary<any>) {
    const { opacity, fill, width, height, left, top } = option
    option.opacity = this.formatOpacity(opacity)
    option.fill = formatColor(fill)
    option.width = Number(width.toFixed())
    option.height = Number(height.toFixed())
    option.top = Number(top.toFixed())
    option.left = Number(left.toFixed())
    return option
  }
  formatOpacity(opacity: number | undefined) {
    if (!opacity) opacity = 100
    opacity = opacity > 100 ? 100 : opacity < 0 ? 0 : opacity
    return opacity / 100
  }
}
export default StylesEditor
</script>

<style lang="less" scoped>
@import '~@/styles/layout.less';
@import '~@/styles/theme.less';
.styles-editor {
  box-sizing: border-box;
  padding: 0 15px;
  width: 100%;
  #flex-start(column, flex-start);
  section {
    width: 100%;
    #flex-start(column, flex-start);
    h5 {
      margin: 0;
      margin-bottom: 8px;
    }
    .editor {
      position: relative;
      width: 100%;
      #flex-center(row, flex-start);
    }
  }
  .operation-cell {
    margin-right: 5px;
    border-radius: 5px;
    transition: all 0.2s ease;
    #flex-start(row, flex-start);
    #color(background-color, --primary-border-color);
  }
  .operation-cell:hover {
    #color(background-color, --lighter-text-color);
  }
  .icon-cell {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    i {
      box-sizing: border-box;
      padding: 5px;
      border-radius: 0;
      transition: all 0.2s ease;
      cursor: pointer;
    }
    i:hover {
      border-radius: 5px;
      #color(background-color, --lighter-text-color);
    }
  }
}
/deep/.el-color-picker {
  .el-color-picker__trigger {
    border: unset;
  }
}
/deep/.el-input {
  width: 60px;
  .el-input__inner {
    padding: 0 5px;
    border: unset;
    background-color: transparent;
    #color(color, --primary-text-color);
  }
  .el-input__suffix,
  .el-input__prefix {
    #flex-center(row, center);
  }
}
/deep/.el-input--prefix {
  padding-left: 15px;
  width: 50px;
}
</style>
